<template>
  <main>
    <header>请在下面的案例中标注出每句文言文的主语、谓语、宾语</header>
    <section class="content">
      <section class="text-container">
        <div ref="container" style="width:100%;height:100%"></div>
      </section>
      <section class="text-tips">
        <ul>
          <li>鼠标选取一段文本，在其上方会生成一个标注标签</li>
          <li>鼠标左键点击标注标签，可以给标注标签重命名</li>
          <li>鼠标左键点击标注标签，可以给标注标签重命名</li>
          <li>鼠标右键标注标签，将标注标签进行删除</li>
          <li>鼠标选中标注内容之后，右键标注标签可以取消文本标注</li>
          <li>标注不同的文字，要使用不同的标签，不同的标签有不同的颜色内容</li>
          <li>数据标注员标注数据之后，右侧数据收集区域显示标注结果</li>
        </ul>
      </section>
    </section>
    <footer>这里是底部信息展示栏</footer>
  </main>
</template>

<script>
import { defineComponent, ref, onMounted, reactive, toRefs } from 'vue';
import { Annotation } from './package/index'
import peotryText from './assets/text/0000.txt?raw'
export default defineComponent({
  setup() {
    const container = ref(null)
    const state = reactive({
      annotation: null,
      originString: "hello world"
    })
    onMounted(() => {
      initGlobelpPoetry()
    })
    const initGlobelpPoetry = () => {
      const data = {
        content: peotryText
      }
      state.annotation = new Annotation(data, container.value, /\n/)
      state.annotation.on('textSelected', (startIndex, endIndex) => {
        console.log(startIndex, endIndex)
      })
    }
    return {
      ...toRefs(state),
      container
    }
  }
})

</script>

<style scoped>
main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

header {
  height: 10%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: aqua;
}

footer {
  height: 5%;
}

.content {
  height: 85%;
  box-sizing: border-box;
  padding: 1rem;
  background-color: lightblue;
  display: flex;
  flex-direction: row;
}

.text-container {
  width: 80%;
  height: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 10px;
}

ul>li {
  margin-top: 10px;
}

.text-tips {
  width: 20%;
  height: 100%;
  background-color: #fff;
  margin-left: 10px;
  box-sizing: border-box;
  padding: 5px;
}
</style>